<template>
    <div ref="chartRef" :style="chartStyle"></div>
</template>
  
  <script>
  // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  import * as echarts from 'echarts/core';
  // 引入折线图图表
  import { LineChart } from 'echarts/charts';
  // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
  } from 'echarts/components';
  // 标签自动布局、全局过渡动画等特性
  import { LabelLayout, UniversalTransition } from 'echarts/features';
  // 引入 Canvas 渲染器
  import { CanvasRenderer } from 'echarts/renderers';
  
  // 注册必须的组件
  echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LineChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
  ]);
  
  export default {
    props: {
      // 这里定义了要接收的props，名称为parentData
      echartsData: {
        // 可以指定数据类型，这里是对象类型
        type: Object,
        // 也可以设置为必填项
        required: false,
        default: () => ({
          title: '默认图表标题',
          xAxis: [],
          yAxis: [],
          xName:"",
          yName:"",
          explain:""
        })
      },

      chartStyle: {
        type: Object,
        default: () => ({})
      },
    
    },
    data() {
      return {
        myChart: null
      };
    },
    mounted() {
      if (this.$refs.chartRef) {
        // 初始化图表
        this.myChart = echarts.init(this.$refs.chartRef);
        this.setChartOptions();
      }
    },
    watch: {
      echartsData: {
        deep: true,
        handler() {
          this.setChartOptions();
        }
      }
    },
    methods: {
      setChartOptions() {
        // 检查数据格式
        if (!Array.isArray(this.echartsData.xAxis) ||!Array.isArray(this.echartsData.yAxis)) {
          console.error('xAxis或yAxis数据格式不正确，必须是数组');
          return;
        }
        // 设置配置项
        this.myChart.setOption({
          // title: {
          //   text: this.echartsData.title
            
          // },
          title: [
                {
                    text: this.echartsData.title,
                    left: 'left'
                },
                // 解释性标题，位于右侧
                {
                    text: this.echartsData.explain,
                    right: '40',
                    textStyle: {
                        fontSize: 20, // 字体大小
                        color: '#666', // 字体颜色
                        fontWeight: 'normal', // 字体粗细
                        
                    }
                }
            ],
          tooltip: {
            trigger: 'axis',
            formatter: (params) => {
                let dotStyle = `background-color: #1890ff; width: 10px; height: 10px; display: inline-block; border-radius: 50%;`;
                let tip = `<p>${params[0].name}</p><p><span style="${dotStyle}"></span> ${this.echartsData.yName}:${params[0].value}</p>`;
                return tip;
            }
          },
          xAxis: {
            type: 'category',
            data: this.echartsData.yAxis, // 修正为 yAxis 的数据作为 x 轴的分类数据
            name: this.echartsData.xName,
            nameLocation: 'middle',
            nameGap: 60 ,
            axisLabel: {
              margin: 30 // 设置 x 轴标签与轴线的距离为 10
            }
          },
          yAxis: {
            type: 'value',
            data: this.echartsData.xAxis, // 修正为 xAxis 的数据作为 y 轴的数值数据
            name: this.echartsData.yName,
            nameLocation: 'middle',
            nameGap: 100 ,
            axisLabel: {
              margin: 30 // 设置 x 轴标签与轴线的距离为 10
            }
          },
          series: [
            {
              data: this.echartsData.xAxis, // 系列数据也修正为 xAxis 的数据（数值数据）
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: {
                width: 2
              },
              areaStyle: {
                // color: 'rgba(255, 100, 100, 1)',
                opacity: 0.5 // 设置透明度为 0.5
              }
            }
          ]
        });
      }
    }
  };
  </script>